<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>分店管理-团队</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/index_team.css">
	<script src='/js/jquery-2.1.1.min.js'></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
</head>
<style>
::-webkit-scrollbar-thumb {
  background:#a2a2a2; 
  border-radius: 10px;
  height:50%;
}
::-webkit-scrollbar{width:6px;}
	body{
		overflow-y: scroll;
}
.layui-table-view .layui-table td{padding:10px 0;}
</style>
<body>
<input type="hidden" id="teamId" name="teamId" th:value="${record.id}" />
	<div class="kb-content">	
		<section class="kb-content-container clearfix" >
				<header class="nav-header">
					<div class="nav-section-header-title clearfix">
						<div class="org-logo-box">
							<div class="mask"><i class="layui-icon" style="font-size: 22px;">&#xe654;</i></div>
							<input type="file" style="display: none;">
							<div class="org-txt" th:text="${record.simpleName}">
							</div>
						</div>
						<div class="d-iblock f-left">
							<span th:text="${record.simpleName}"></span>
							<div class="team-located" th:if="${!record.deliverDetails}" th:if="${!record.cardKnowledge}" th:if="${!record.cardAuthorization}" style="background: rgb(221, 90, 85);">未完成入驻</div>
							<div class="team-located" th:if="${record.deliverDetails}" th:if="${record.cardKnowledge}" th:if="${record.cardAuthorization}" style="background: rgb(115, 187, 75);">未完成入驻</div>
							<div class="team-located" th:if="${record.enterpriseQualification==0}" >资质未确认</div>
							<div class="team-located" th:if="${record.enterpriseQualification==1}" style="background: rgb(115, 187, 75);">资质未确认</div>
							<div>
								<div class="action-bar-type"><span th:text="${record.fullName}"></span></div>
								<div class="action-bar-status" th:if="${record.dicIndustry!=null}"><i class="layui-icon">&#xe653;</i><span th:text="${record.dicIndustry.dicName}"></span></div>
								<div class="action-bar-status" th:if="${record.dicStage!=null}"><i class="layui-icon">&#xe857;</i><span th:text="${record.dicStage.dicName}"></span></div>
							</div>
						</div>
						<div class="f-right">
							<button class="layui-btn layui-btn-radius layui-btn-normal" id="add_staff" th:if="${record.deliverDetails}" th:if="${record.cardKnowledge}" th:if="${record.cardAuthorization}">
								<i class="layui-icon" ></i>添加新员工
							</button>
							<button class="layui-btn layui-btn-radius layui-btn-normal" id="add_contract">
								<i class="layui-icon"></i>添加新合同
							</button>
							
							<div class="kb_dropdown">
								<a class="kb_dropdown__trigger " href="#dropdown-trigger">
									<button class="layui-btn layui-btn-radius layui-btn-normal" id="">
										<i class="layui-icon">&#xe625;</i>更多
									</button>
								</a>
								<div class="kb_dropdown__content" style="left:-3px">
									<div class="user-dropdown">
										<a th:id="${record.id}" class="edit_Team">编辑</a><a>添加账款</a>
										<a>退租</a><a th:id="${record.id}" class="del_Team">删除</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</header>
				<div class="kb-tabs nav-section-content-container clearfix" style="overflow:hidden">
					<div class="tip-in" style="" th:if="${!record.deliverDetails}" th:if="${!record.cardKnowledge}" th:if="${!record.cardAuthorization}">
						<img src="/images/icon/mirro@2x.png" style="width: 20px; position: absolute; top: 47%; transform: translateY(-50%);">
						<span style="color: rgb(225, 59, 63); margin-left: 40px;">此公司尚未完成入驻手续，点击确认入驻</span>
						<button class="layui-btn  layui-btn-sm layui-btn-normal layui-btn-radius btn-bg" id="admission_Team">点击入驻</button>
					</div>
					<div class="kb-chart  flex-between t-center" style="margin-top: 60px; margin-bottom: 30px;padding: 0px 50px;">
						<!-- <div class="chart-box t-left" style="flex: 1 1 0%;">
							<a href="/admin/locations/4/organizations/324/contracts" style="position: relative;">
								<div class="statistic-box">
									<div class="header"><span class="number">8</span><span class="unit">个</span></div>
									<div class="name"><span>购买工位数</span></div>
								</div>
							</a>
						</div> -->
						<div class="chart-box t-left" style="flex: 1 1 0%;">
							<div class="statistic-box">
								<div class="header"><span class="number" id="stationNumber">8</span><span class="unit">个</span></div>
								<div class="name"><span>入驻工位数</span></div>
							</div>
						</div>
						<div class="chart-box t-left" style="flex: 1 1 0%;">
							<div class="statistic-box">
								<div class="header"><span class="number" id="teamNumber">8</span><span class="unit">个</span></div>
								<div class="name"><span>团队人数</span></div>
							</div>
						</div>
						<!-- <div class="chart-box t-left"  style="flex: 1 1 0%;">
							<div class="statistic-box">
								<div class="header"><span class="number">8</span><span class="unit">天</span></div>
								<div class="name"><span>入驻工位数</span></div>
							</div>
						</div> -->
						<!-- <div class="chart-box t-left" style="flex: 1 1 0%;">
							<div class="statistic-box">
								<div class="header"><span class="number">8</span><span class="unit">个</span></div>
								<div class="name"><span>区域数</span></div>
							</div>
						</div> -->
						<div class="chart-box t-left" style="flex: 1 1 0%;">
							<div class="statistic-box">
								<div class="header"><span class="number" id="daoqiDays">8</span><span class="unit">天</span></div>
								<div class="name"><span>合同到期时间</span></div>
							</div>
						</div>
						<div class="chart-box t-left" style="flex: 1 1 0%;">
							<a href="#" style="position: relative;">
								<div class="statistic-box">
									<div class="header"><span class="number" id="jifen">8</span><span class="unit">个</span></div>
									<div class="name"><span>积分</span><button class="layui-btn  layui-btn-xs layui-btn-normal layui-btn-radius btn-bg" id="recharge">充值</button></div>
								</div>
							</a>
						</div>
					</div>
					<div class="kb-chart  flex-between t-center" style="margin-bottom: 30px;padding: 0px 50px;">
						<!-- <div class="chart-box t-left" style="flex: 1 1 0%;">
							<a href="/admin/locations/4/organizations/324/contracts" style="position: relative;">
								<div class="statistic-box">
									<div class="header"><span class="number">8</span><span class="unit">个</span></div>
									<div class="name"><span>团队人数</span></div>
								</div>
							</a>
						</div>
						<div class="chart-box t-left" style="flex: 1 1 0%;">
							<div class="statistic-box">
								<div class="header"><span class="number">8</span><span class="unit">个</span></div>
								<div class="name"><span>区域数</span></div>
							</div>
						</div>
						<div class="chart-box t-left"  style="flex: 1 1 0%;">
							<div class="statistic-box">
								<div class="header"><span class="number">8</span><span class="unit">天</span></div>
								<div class="name"><span>会议室剩余时长</span></div>
							</div>
						</div> -->
						<!-- <div class="chart-box t-left" style="flex: 1 1 0%;">
							<a href="#" style="position: relative;">
								<div class="statistic-box">
									<div class="header"><span class="number" id="jifen">8</span><span class="unit">个</span></div>
									<div class="name"><span>积分</span><button class="layui-btn  layui-btn-xs layui-btn-normal layui-btn-radius btn-bg" id="recharge">充值</button></div>
								</div>
							</a>
						</div> -->
					</div>
					<div class="layui-tab layui-tab-brief my-tab" lay-filter="docDemoTabBrief">
						<ul class="layui-tab-title">
						  <li class="layui-this" value="gaikuang">概况</li>
						  <li value="staff">员工</li>
						  <li value="contract">合同</li>
						  <li value="bill">收款</li>
						  <li value="integral">积分</li>
						  <li value="field">会议室</li>
						  <li value="">附件</li>
						</ul>
						<div class="layui-tab-content " id="gaikuang">
								<div style='width: 100%; height: 100%; position: relative;'>
									<div class="my-locations-list clearfix">
								<div class="nav-content-1 f-left">
									<div class="org_summary_pad">
										<header class="nav-inner-header clearfix"><div class="org_summary_header f-left">所在分区</div></header>
										<div class="clearfix" style="margin-top: 30px;">
											<a href="">
												<div class="areas_new">
													<div class="area_names">A006（封闭</div>
													<div class="area_details"><span>2018/06/13 - 2018/12/12</span></div>
												</div>
											</a>
										</div>
									</div>
									<div class="org_summary_pad">
										<header class="nav-inner-header clearfix"><div class="org_summary_header f-left">合同</div></header>
										<div style="margin-top: 10px;">
											<table id="contractList">
												
											</table>
										</div>
									</div>
									<br><br>
									<div class="org_summary_pad">
										<header class="nav-inner-header clearfix"><div class="org_summary_header f-left">团队负责人</div></header>
										<div class="clearfix" style="margin-top: 30px;">
											<div class="team_hover  org_wrapper_box">
												<a href="#">
													<table class="content-table">
														<tbody>
															<tr style="border-bottom: none;">
																<td class="table_td">
																	<span class="org_summary_title">负责人：</span>
																	<span class="org_summary_content" th:text="${record.chargeName==''} ?'暂无':${record.chargeName}">田茂昌</span>
																</td>
																<td class="table_td">
																	<span class="org_summary_title">手机号：</span>
																	<span class="org_summary_content" th:text="${record.chargePhone==''} ?'暂无':${record.chargePhone}">13269503421</span>
																</td>
															</tr>
															<tr style="border-bottom: none;">
																<td class="table_td">
																	<span class="org_summary_title">邮箱：</span>
																	<span class="org_summary_content" th:text="${record.chargeMail==''} ?'暂无':${record.chargeMail}">暂无</span>
																</td>
																<td class="table_td">
																</td>
															</tr>
														</tbody>
													</table>	
												</a>
											</div>
										</div>
									</div>
									<br><br>
									<div class="org_summary_pad">
										<header class="nav-inner-header clearfix"><div class="org_summary_header f-left">客户信息</div></header>
										<div style="margin-top: 10px;">
											<div style="color: rgb(76, 76, 76); opacity: 0.8; padding-top: 25px; text-align: center; font-size: 16px;">暂无客户信息</div>
										</div>
									</div>
									<br><br>
									<div class="org_summary_pad">
										<header class="nav-inner-header clearfix"><div class="org_summary_header f-left">公司介绍</div></header>
										<div style="margin-top: 10px;" th:text="${record.brief}">
										</div>
										<div th:if="${record.brief==''}" style="color: rgb(76, 76, 76); opacity: 0.8; padding-top: 25px; text-align: center; font-size: 16px;">暂无公司介绍</div>
									</div>
									<br><br>
									
								</div>
								<div class="nav-content-2 f-right">
									<div class="nav-container-content">
										<header class="nav-inner-header clear-fix"><h2 class="header-title">管理团队</h2></header>
										<ul class="desk-2-ul">
											<li>
												<a class="flex">
													<div class="desk-user-img-2">
														<img src="/images/user_head.jpg" style="width: 30px; height: 30px; border-radius: 100px;">
													</div>
													<div class="desk-user-message-2">
															<div class="desk-user-name-2">
																<p class="desk-user-icon">
																	<span style="display: initial; margin-right: 5px;">Admin</span>
																	<i class="layui-icon color-golden">&#xe67b;</i>
																</p>
																<p>admin</p>
															</div>
													</div>
												</a>
											</li>
											<li>
												<a class="flex">
													<div class="desk-user-img-2">
														<img src="/images/user_head.jpg" style="width: 30px; height: 30px; border-radius: 100px;">
													</div>
													<div class="desk-user-message-2">
															<div class="desk-user-name-2">
																<p class="desk-user-icon">
																	<span style="display: initial; margin-right: 5px;">Admin</span>
																	<i class="layui-icon color-golden">&#xe67b;</i>
																</p>
																<p>admin</p>
															</div>
													</div>
												</a>
											</li>
											<li>
												<a class="flex">
													<div class="desk-user-img-2">
														<img src="/images/user_head.jpg" style="width: 30px; height: 30px; border-radius: 100px;">
													</div>
													<div class="desk-user-message-2">
															<div class="desk-user-name-2">
																<p class="desk-user-icon">
																	<span style="display: initial; margin-right: 5px;">Admin</span>
																	<i class="layui-icon color-golden">&#xe67b;</i>
																</p>
																<p>admin</p>
															</div>
													</div>
												</a>
											</li>
										</ul>
									</div>
									<div class="nav-container-content"></div>
								</div>
							</div>		
								</div>
						</div>
						<div class="layui-tab-content iframe-wrap" style="display: none;" id="qita">
							<iframe id="team-iframe" src="" frameborder="0" width="100%"  heigth="100%" scroll="no"></iframe>
						</div>
					</div>    
				</div> 	
		</section>
	</div>
	<input type="hidden" id="fkProject" name="fkProject" th:value="${record.fkProject}" />
</body>

<script>

$(function(){
		
		layui.use(['element',"layer","table"], function(){
		  var element = layui.element,layer=layui.layer,table=layui.table;
		  //获取合同列表
		  var teamId = $("#teamId").val();
		  table.render({
		    elem: '#contractList'
		    ,url: '/app/contractInfo/listdata' //数据接口
		    ,page: false //开启分页
		    ,where:{
		    	params:{
		    		teamId:teamId,
		    		state:0
		    	}
		    }
		    ,cols: [[ //表头
		      {field: 'contractNumber', title: '合同编号'}
		      ,{
					field : 'status',
					title : '状态',
					templet : function(d) {
						if(d.state == 0){
							return '<span style="background:#73bb4b;color:#fff;display:inline-block;padding:0 15px;">已签</span>';
						}else if(d.state == 1){
							return '<span style="background:#ffdfdf;color:#dd5a55;display:inline-block;padding:0 15px;">已结束</span>';
						}else{
							return '<span style="background:#73bb4b;color:#fff;display:inline-block;padding:0 15px;">快到期</span>';
						}
					}
				}
		      ,{field: 'date', title: '日期',templet:function(d){
		    	  return  '<span data-id="'+d.id+'">'+d.startDate + ' ~ ' + d.endDate+'</span>'
		      }}
		      ,{field: 'opt', title: '操作',templet:function(d){
		    	  return '<a href="javascript:;" class="layui-btn  layui-btn-xs layui-btn-normal" onclick=toAddReNew("'+d.id+'",event) >合同续约</a>'
		      }}
		      
		    ]]
		  });
		  tableBtnOpt();
		});
		var sh=true;
		$(".kb_dropdown__trigger").on("click",function(){
			if(sh){
				$(".kb_dropdown__content").addClass("show").removeClass("hide");
				sh=false;
			}else{
				$(".kb_dropdown__content").addClass("hide").removeClass("show");
				sh=true;
			}
			
		})
		$("#recharge").on("click",function(){
			var teamId=$("#teamId").val();
			top.layer.open({
				type: 2, 
				title:"积分充值",
				area: ['700px','700px'],
				   shade: [0.6, '#000'],
				   zIndex:800,
				content:"/app/customerIntegral/add/"+teamId , 
				end: function () {
					$(".layui-tab-title li:eq(4)").addClass("layui-this").siblings("li").removeClass("layui-this");
					var teamId=$("#teamId").val();
					iframeSrc="/app/customerIntegral/list/"+teamId;
					var iframe = document.createElement('iframe');//动态创建iframe，禁止iframe的src回退；
				    iframe.src = iframeSrc;
				    iframe.width = '100%';
				    iframe.height = '100%';
				    iframe.id = 'team-iframe';
				    $(".iframe-wrap").html($(iframe));
				    $("#qita").show();
					$("#gaikuang").hide();
				}
			}); 
			
		})
		
		$(".layui-tab-title li").on("click",function(){
			var val=$(this).attr("value");
			var teamId=$("#teamId").val();
			var iframeSrc="";
			$("#qita").show();
			$("#gaikuang").hide();
			if(val=="gaikuang"){
				$("#gaikuang").show();
				$("#qita").hide();
			}else if(val=="staff"){
				iframeSrc="/app/customerStaff/list/"+teamId;
			}else if(val=="contract"){
				var fkProject=$("#fkProject").val();
				iframeSrc="/app/contractInfo/list/"+teamId+"_"+fkProject;
			}else if(val=="integral"){
				var teamId=$("#teamId").val();
				iframeSrc="/app/customerIntegral/list/"+teamId;
			}else if(val=="bill"){
				var teamId=$("#teamId").val();
				iframeSrc="/app/contractReceivable/listByTeam/"+teamId;
			}else if(val=="field"){
				var teamId=$("#teamId").val();
				iframeSrc="/app/customerTeam/fieldList/"+teamId;
			}
			var iframe = document.createElement('iframe');//动态创建iframe，禁止iframe的src回退；
		    iframe.src = iframeSrc;
		    iframe.width = '100%';
		    iframe.height = '100%';
		    iframe.id = 'team-iframe';
		    $(".iframe-wrap").html($(iframe));
		})
		//新增合同
		
		
		$("#add_contract").on("click",function(){
			var fkProject=$("#fkProject").val();
			var fkTeam  = $("#teamId").val();
			//var iframeSrc='/app/contractInfo/add/'+fkProject+"_"+fkTeam;
			var iframeSrc = "/app/contractInfo/addDetails/"+fkProject+"_"+fkTeam;
			var iframe = document.createElement('iframe');//动态创建iframe，禁止iframe的src回退；
		    iframe.src = iframeSrc;
		    iframe.width = '100%';
		    iframe.height = '100%';
		    iframe.id = 'project-iframe';
		    parent.$(".iframe-wrap").html($(iframe)); 
		})
		
		//修改团队信息
		$(".edit_Team").on("click",function(){
			parent.parent.layer.open({
				type: 2, 
				title:"修改公司",
				area: ['700px','90%'],
				   shade: [0.6, '#000'],
				   zIndex:800,
				content:"/app/customerTeam/edit/"+this.id , 
				end: function () {
					location.reload();
				}
			}); 
		})
		//新增员工add_staff
		$("#add_staff").on("click",function(){
			var teamId=$("#teamId").val();
			parent.parent.layer.open({
				type: 2, 
				title:"添加新会员",
				area: ['700px','90%'],
				   shade: [0.6, '#000'],
				   zIndex:800,
				content:"/app/customerStaff/add/"+teamId , 
				end: function () {
					location.reload();
				}
			}); 
		})
		//入驻
		$("#admission_Team").on("click",function(){
			var teamId=$("#teamId").val();
			parent.parent.layer.open({
				type: 2, 
				title:"入驻待办事项",
				area: ['700px','300px'],
				   shade: [0.6, '#000'],
				   zIndex:800,
				content:"/app/customerTeam/admission/"+teamId , 
				end: function () {
					location.reload();
				}
			}); 
		})
		
		$(".del_Team").on("click",function(){
			var id =this.id;
			var fkProject=$("#fkProject").val();
			layer.confirm('确认要删除吗，删除后不能恢复', function(index){
		    	//发送删除请求
		    	$.post("/app/customerTeam/delete",{id:id},function(res){
		    		parent.parent.layer.msg(res.msg);
		    		parent.parent.layer.close(index);
		    		
		    		var iframeSrc='/app/customerTeam/list/'+fkProject;
		    		var iframe = document.createElement('iframe');//动态创建iframe，禁止iframe的src回退；
		    	    iframe.src = iframeSrc;
		    	    iframe.width = '100%';
		    	    iframe.height = '100%';
		    	    iframe.id = 'project-iframe';
		    	    parent.$(".iframe-wrap").html($(iframe));
		    	    
		        },"json");
		  	});	 
		})
		//合同列表行点击事件
		function tableBtnOpt(){
			var $mylist = $("#contractList").next('.layui-table-view').find('.layui-table-body table.layui-table');
			/*  点击tr元素,跳转详情基于table*/
			  $mylist.on("click",'tr',function(){
					var targetI=$(this);
					var id=$(targetI).children('td').find("span[data-id]").attr("data-id");
					tiaozhuan(id);
					return false;
			  }); 
		}
		function tiaozhuan(id){
			var iframeSrc='/app/contractInfo/detailCenter/'+id;
			var iframe = document.createElement('iframe');//动态创建iframe，禁止iframe的src回退；
    	    iframe.src = iframeSrc;
    	    iframe.width = '100%';
    	    iframe.height = '100%';
    	    iframe.id = 'project-iframe';
    	    parent.$(".iframe-wrap").html($(iframe));
		}
		getNumber();
})
//iframe容器的高度
function parentHeight(h){
    document.getElementById("team-iframe").style.height = h+"px";
};
function toAddReNew(id,event){
	preventBubble(event);//阻止行点击事件
	var fkProject=$("#fkProject").val();
	var fkTeam  = $("#teamId").val();
	var iframeSrc='/app/contractInfo/toAddReNewContract/'+fkProject+'_'+fkTeam+'_'+id;
	var iframe = document.createElement('iframe');//动态创建iframe，禁止iframe的src回退；
    iframe.src = iframeSrc;
    iframe.width = '100%';
    iframe.height = '100%';
    iframe.id = 'project-iframe';
    parent.$(".iframe-wrap").html($(iframe));
}
/* 阻止事件冒泡 */
function preventBubble(event){ //取消事件冒泡
	  var e=arguments.callee.caller.arguments[0]||event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容  
	  if (e && e.stopPropagation) {  
	    e.stopPropagation();  
	  } else if (event) {  
	    event.cancelBubble = true;  
	  }  
}
function getNumber(){
	var fkTeam  = $("#teamId").val();
	$.post("/app/customerTeam/statistics",{teamId:fkTeam}, function(result) {
		$("#jifen").text(result.existingBalance);
		$("#daoqiDays").text(result.contractDay);
		$("#teamNumber").text(result.staff);
		$("#stationNumber").text(result.projectStation);
		console.log(result.contractDay);
	}, 'json');
}
</script>
</html>